<template>
  <el-dialog
    :title="permissionForm.id ? '编辑权限点' : '添加权限点'"
    :visible="value"
    width="50%"
    @close="closeDialog">
    <el-form :model="permissionForm" :rules="permissionRules" ref="permissionRef" label-width="80px">
      <!-- 
        prop 的作用
          1. 用于指定验证的是哪个字段
          2. 当使用 resetFields 方法清空表单内容时，会清空绑定 prop 对应的表单内容
      -->
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permissionForm.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="permissionForm.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="permissionForm.description" />
      </el-form-item>
      <el-form-item label="权限启用">
        <el-switch
          v-model="permissionForm.enVisible"	
          active-value="1"
          inactive-value="0"
          active-text="启用"
          inactive-text="不启用"
        />
      </el-form-item>
      <!-- 额外的表单项内容 -->
      <!-- <el-form-item label="额外的表单项">
        <el-input v-model="inputValueComputed" />
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionDetail, updatePermission } from '@/api/permission'

export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    type: {
      type: Number,
      required: true
    },
    pid: {
      type: String,
      required: true
    },
    permissionForm: {
      type: Object,
      required: true
    },
    inputValue: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // permissionForm: {
      //   name: '', // 权限名称
      //   code: '', // 权限标识
      //   description: '', // 权限描述
      //   enVisible: '0' // 权限启用标识
      // },
      permissionRules: {
				name: [
          { required: true, message: '请填写权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写权限标识', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    inputValueComputed: {
      get() {
        return this.inputValue
      },
      set(newVal) {
        this.$emit('changeInputValue', newVal)
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      // 通知父组件关闭弹窗
      this.$emit('input', false)
      // 清空表单内容
      this.$refs.permissionRef.resetFields()
      // 手动清空数据
      this.$emit('changePermissionForm', {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '0' // 权限启用标识
      })
      // this.permissionForm = {
      //   name: '', // 权限名称
      //   code: '', // 权限标识
      //   description: '', // 权限描述
      //   enVisible: '0' // 权限启用标识
      // }
    },
    // 点击确定，完成添加/编辑权限点功能
    submit() {
      // 兜底校验
      this.$refs.permissionRef.validate(async valid => {
        if (!valid) return
        // 校验通过
        // 发起请求
        if (this.permissionForm.id) {
          // 当前是编辑
          await updatePermission(this.permissionForm)
        } else {
          // 当前是添加
          await addPermission({
            ...this.permissionForm,
            type: this.type,
            pid: this.pid
          })
        }
        // 提示用户
        const msg = this.permissionForm.id ? '编辑权限点成功' : '添加权限点成功'
        this.$message.success(msg)
        // 关闭弹窗
        this.$emit('input', false)
        // 刷新列表
        this.$emit('get-permission-list')
      })
    },
    // 获取权限点详情数据
    // async getPermissionDetail(id) {
    //   const res = await getPermissionDetail(id)
    //   this.permissionForm = res.data
    // }
  }
}
</script>

<style>

</style>